<template>
    <n-drawer :show="active" :width="width" :mask-closable="false" @update:show="(flag:boolean) => (active = flag)">
        <n-drawer-content  :native-scrollbar="false" title="导入车型图片" closable>
            <n-space vertical :size="12">
                <n-alert title="提示" type="warning">
                    <n-space vertical>
                        <n-text>您将进行车型图片导入</n-text>
                        <n-text>1. 最大导入图片数量不超过200张</n-text>
                        <n-text>2. 请按照规定的命名格式对文件命名</n-text>
                        <n-text>3. 导入图片全部为新增模式处理</n-text>
                    </n-space>
                </n-alert>

                <n-divider />
                <n-card :style="{ textAlign: 'center' }">
                    <n-upload ref="uploadRef" accept="application/zip" :default-upload="false" :max="1" :customRequest="execUpload" @before-upload="beforeUpload">
                        <n-upload-dragger>
                            <div style="margin-bottom: 12px">
                                <n-icon size="48" :depth="3">
                                    <archive-icon />
                                </n-icon>
                            </div>
                            <n-text style="font-size: 16px">点击或者拖动文件到该区域来上传</n-text>
                            <n-p depth="3" style="margin: 8px 0 0 0">将车型图片打包为.zip格式文件</n-p>
                            <n-p depth="3" style="margin: 8px 0 0 0">[车系ID]_[是否默认（0：否，1：是）]_[年款]_[颜色]_[类型，可空].[jpg|png|webp]</n-p>
                            <n-p depth="3" style="margin: 8px 0 0 0">例如：220_1_2022_珍珠白_两厢.png</n-p>
                        </n-upload-dragger>
                    </n-upload>
                </n-card>
            </n-space>
            <template #footer>
                <n-space justify="end">
                    <n-button type="tertiary" @click="() => (active = false)">
                        <template #icon>
                            <n-icon :component="CloseRound" />
                        </template>
                        关闭
                    </n-button>
                    <n-button type="primary" :loading="loading" @click="() => uploadRef?.submit()">
                        <template #icon>
                            <n-icon :component="CheckRound" />
                        </template>
                        提交导入
                    </n-button>
                </n-space>
            </template>
        </n-drawer-content>
    </n-drawer>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue'
import { CloseRound, CheckRound, CloudUploadRound as ArchiveIcon } from '@vicons/material'

import { Http } from '@/libs'
import { useStore } from '@/store'
const store = useStore()
const width = computed(() => Math.max(store.state.browser.innerWidth * 0.4, 640))

const { $notification: notification } = window

const loading = ref(false)

const prop = defineProps({
    show: {
        type: Boolean,
        required: true,
    },
})

const emit = defineEmits(['update:show', 'refresh'])

const active = computed({
    get: () => prop.show,
    set: val => emit('update:show', val),
})

const uploadRef = ref<any>(null)

const execUpload = ({ file, onFinish, onError, onProgress }: any) => {
    let formData = new FormData()
    formData.append('file', file.file as Blob)
    Http.post('/ops/sys/car/model/image/upload', formData, {
        onUploadProgress: ({ loaded, total }) => {
            onProgress({ percent: Math.ceil((loaded / total) * 100) })
        },
    })
        .then(resp => {
            if (resp.stat.err > 0) {
                onError()
                return
            }
            notification.success({
                duration: 1500,
                title: '操作成功',
                content: '您已成功上传[' + file.name + ']',
            })
            setTimeout(() => {
                loading.value = false
                emit('update:show', false)
            }, 200)
            onFinish()
        })
        .catch(e => {
            console.log(e)
            onError()
        })
}

const beforeUpload = async (arg: any) => {
    if (arg.file.type !== 'application/zip' && arg.file.type !== 'application/x-zip-compressed') {
        notification.error({
            duration: 1500,
            title: '上传失败',
            content: '不支持该类型文件，请上传ZIP类型文件',
        })
        return false
    }
    return true
}
</script>
